<template>
	<view>
		<u-card border="false" margin="10rpx 5rpx" padding="20">
			<view slot="head" style="display: flex;justify-content: space-between;">
				<view>
					<u-icon slot="icon" size="35" name="file-text"></u-icon><text>待办事项</text>
				</view>
				<u-icon slot="right-icon" size="35" :color="data.status == 0 ? '#fa3534':'#19be6b'"
					:name="data.status == 0 ? 'close-circle':'checkmark-circle'"></u-icon>
			</view>
			<view slot="body">
				<view style="margin-bottom: 5%;">
					<text>待办事项：{{ data.botBillCells[0].planTitle }}</text>
				</view>
				<view style="margin-bottom: 5%;">
					<text>待办发起人：</text>
					<u-avatar size="50" :src="data.avatar"></u-avatar>
				</view>
				<view style="margin-bottom: 5%;">
					<text>待办执行人：</text>
					<u-avatar v-for="(inner,innerIndex) in data.botBillCells[0].billCellUserList" :key="innerIndex"
						size="50" :src="inner.sysUser.avatar"></u-avatar>
				</view>
				<view>
					<text>待办发起时间：{{ data.createTime }}</text>
				</view>
			</view>
			<view slot="foot">
				<view>
					<u-icon slot="icon" size="35" name="account"></u-icon><text>执行情况</text>
				</view>
				<u-cell-group v-for="(inner,innerIndex) in data.botBillCells[0].billCellUserList" :key="innerIndex">
					<u-cell-item :arrow="inner.status === 1? false:true" @click="selected(inner)">
						<view slot="title" style="display: flex;">
							<view style="margin-top: 5%;margin-right: 5%;">
								<u-avatar :src="inner.sysUser.avatar"></u-avatar>
							</view>
							<view style="width: 100%;">
								<u-time-line>
									<u-time-line-item nodeTop="2">
										<template v-slot:node>
											<view class="u-node" style="background: #19be6b;">
												<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
											</view>
										</template>
										<template v-slot:content>
											<view style="width: 150rpx;">
												<view class="u-order-title">
													<text
														:style="{'color': inner.processStatus === 0 || inner.processStatus === 5 ? '#ff9900' : (inner.processStatus === 1 ? (inner.status === 1? '#19be6b':'#ff9900') : '#fa3534')}">
														{{ inner.processStatus === 1 ? (inner.status === 1? '已完成':'待执行') : (inner.processStatus === 2 ? '待处理' : '待审批') }}
													</text>

												</view>
											</view>
										</template>
									</u-time-line-item>
									<u-time-line-item v-for="(botItem,botItemIndex) in inner.botItemList"
										:key="botItemIndex">
										<template v-slot:content>
											<view>
												<view class="u-order-title">
													<text
														:style="{'color': botItem.processStatus === 2 ? '#fa3534' : '#19be6b'}">
														{{ botItem.processStatus === 1 ? (botItem.status === 1 ? '执行':'同意'):(botItem.processStatus === 2?'驳回':'重新提交') }}
													</text>
												</view>
												<view class="u-order-desc"
													v-if="botItem.processStatus === 2 || botItem.processStatus === 5">
													备注：<text>{{botItem.remark}}</text>
												</view>
												<view class=" u-order-time">{{botItem.updateTime}}</view>
											</view>
										</template>
									</u-time-line-item>
								</u-time-line>
							</view>
						</view>
					</u-cell-item>
				</u-cell-group>
			</view>
		</u-card>
		<u-popup v-model="popShow" mode="top" border-radius="30" width="60%">
			<view style="padding: 0 10%;">
				<u-form-item label="流程审核人:" label-width="200">
					<u-avatar size="70" :src="currentOption.sysUser.avatar"></u-avatar>
				</u-form-item>
				<u-form-item label="流程状态:" label-width="150">
					<text :style="{'color':currentOption.processStatus == 2?'#19be6b':'#fa3534'}">{{popTitle}}</text>
				</u-form-item>
				<u-form-item label="备注:" label-width="150">
					<u-input v-model="currentOption.remark" type="text" :border="false" confirm-type="done"
						placeholder="输入备注" @confirm="submitIfReasonProvided" />
				</u-form-item>
			</view>
		</u-popup>
		<u-action-sheet :list="list" v-model="show" :cancel-btn="true" @click="settingOfOption"></u-action-sheet>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getBillById,
		updateBillCellUser
	} from '@/api/bot/bill'
	import config from '@/config'
	export default {
		data() {
			return {
				data: {},
				baseUrl: config.baseUrl,
				list: [{
					text: '同意并执行',
					color: '#19be6b',
				}, {
					text: '同意稍后执行',
					color: '#2979ff',
				}, {
					text: '驳回',
					color: '#fa3534',
				}],
				show: false,
				popShow: false,
				popTitle: '',
				currentOption: null,
				query: {
					billId: '',
					cellId: ''
				}
			}
		},
		onLoad(option) {
			this.query.billId = option.billId
			this.query.cellId = option.cellId
			this.getBillById()
		},
		methods: {
			getBillById() {
				uni.showLoading({
					title: "加载中..."
				})
				getBillById(this.query).then(res => {
					this.data = res.data
					this.data.avatar = this.baseUrl + this.data.avatar
					this.data.botBillCells[0].billCellUserList.forEach(element => {
						element.sysUser.avatar = this.baseUrl + element.sysUser.avatar
					})
					uni.hideLoading()
				})
			},
			selected(inner) {
				this.currentOption = inner
				if (this.$store.getters.userId !== inner.sysUser.userId && inner.processStatus !== 2) {
					this.$refs.uToast.show({
						title: `仅执行人可操作`,
						type: 'warning',
					});
					return;
				} else if (this.$store.getters.userId === this.data.userId && inner.processStatus === 2) {
					this.list = [{
						text: '重新提交',
						color: '#2979ff',
					}];
					this.show = true;
				} else {
					if (inner.processStatus === 1 && inner.status != 1) {
						this.list = [{
							text: '执行',
							color: '#2979ff',
						}];
						this.show = true;
					} else if (inner.processStatus === 1 && inner.status == 1) {
						this.$refs.uToast.show({
							title: `该执行人已完成`,
							type: 'success',
						});
					} else if (inner.processStatus === 2) {
						this.$refs.uToast.show({
							title: `待发起人重新提交`,
							type: 'warning',
						});
						return;
					} else {
						this.list = [{
							text: '同意并执行',
							color: '#19be6b',
						}, {
							text: '同意稍后执行',
							color: '#2979ff',
						}, {
							text: '驳回',
							color: '#fa3534',
						}];
						this.show = true;
					}
				}
			},
			settingOfOption(index) {
				console.log(`点击了第${index + 1}项，内容为：${this.list[index].text}`);
				if (this.list[index].text == '同意稍后执行') {
					this.currentOption.processStatus = 1;
					this.updateBillCellUser()
				} else if (this.list[index].text == '同意并执行') {
					this.currentOption.processStatus = 1;
					this.currentOption.status = 1;
					this.checkStatus();
					this.updateBillCellUser()
				} else if (this.list[index].text == '驳回') {
					this.popTitle = '驳回'
					this.currentOption.remark = ''
					this.popShow = true
				} else if (this.list[index].text == '执行') {
					this.currentOption.status = 1;
					this.checkStatus();
					this.updateBillCellUser()
				} else if (this.list[index].text == '重新提交') {
					this.popTitle = '重新提交'
					this.currentOption.remark = ''
					this.popShow = true
				}
			},
			updateBillCellUser() {
				uni.getStorage({
					key: 'groupIdByIndex',
					success: (res) => {
						let data = JSON.parse(res.data);
						let groupId = data.id;
						this.currentOption.groupId = groupId
						updateBillCellUser(this.currentOption).then(res => {
							if (res.code == 200) {
								this.$store.commit('IS_REFRESH', true)
								this.getBillById()
							}
						})
					}
				})
			},
			checkStatus() {
				const allCompleted = this.data.botBillCells[0].billCellUserList.every(inner => inner.status === 1);
				if (allCompleted) {
					this.data.botBillCells[0].status = 1;
				}
			},
			submitIfReasonProvided() {
				if (this.currentOption.remark) {
					let processStatus = 0
					if (this.currentOption.botItemList.length > 0) {
						processStatus = this.currentOption.botItemList[0].processStatus;
					}
					if (processStatus == 0 || processStatus == 5) {
						this.currentOption.processStatus = 2;
					}
					if (processStatus == 2) {
						this.currentOption.processStatus = 5;
					}
					this.updateBillCellUser()
					this.popShow = false
				} else {
					this.$refs.uToast.show({
						title: '请输入备注信息',
						type: 'warning'
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>